<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/jsp/common/BasePath.jsp"%>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title><spring:message code="Login" /></title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="resources/loginres/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="resources/loginres/css/login.css" />
<link rel="stylesheet" type="text/css" href="resources/loginres/css/component.css" />
<link rel="shortcut icon" href="resources/icon/favicon.png">
<style type="text/css">
:-webkit-autofill {
 -webkit-text-fill-color: #fff !important;
 transition: background-color 5000s ease-in-out 0s;
}
</style>
</head>
<body class="hold-transition login-page" onkeydown='onEnterDown()'>

	<div class="container demo-1">
		<div class="content">
			<div id="large-header" class="large-header">
				<canvas id="demo-canvas"></canvas>
				<div class="logo_box">
					<h3><spring:message code="Welcome" /></h3>
					<form action="login"  method="post" id="loginForm" >
						<div class="input_outer"  id="userDiv">
							<span class="u_user"></span>
							<input name="logname" class="text usernameInput" id="usernameInput" 
								  type="text"  placeholder="<spring:message code="Please input username" />" />
						</div>
						<div class="input_outer" id="passDiv"  >
							<span class="us_uer"></span>
							<input name="logpass" class="text passwordInput"   type="password" id="passwordInput"
								placeholder="<spring:message code="Please input password" />" />
						</div>
						<div class="mb2"><a class="act-but submit highLight" id="loginBtn" onclick="doLogin();"
							style="color: #FFFFFF"><spring:message code="Login" /></a></div>
						<div style="text-align: center;"><spring:message code="${error }" /></div>
					</form>
				</div>
			</div>
		</div>
	</div> 

<script src="resources/loginres/js/TweenLite.min.js"></script>
<script src="resources/loginres/js/EasePack.min.js"></script>
<script src="resources/loginres/js/login.js"></script>
	
<script src="resources/js/jquery-2.1.4.js"></script>
<script type="text/javascript">

$(function(){
	
	$("#usernameInput").focus(function(){
		$("#userDiv").addClass("divLight");
	});
	$("#usernameInput").blur(function(){
		$("#userDiv").removeClass("divLight");
	});
	
	$("#passwordInput").focus(function(){
		$("#passDiv").addClass("divLight");
	});
	$("#passwordInput").blur(function(){
		$("#passDiv").removeClass("divLight");
	});
	
	});
	function onEnterDown(){
		if(window.event.keyCode == 13){
			doLogin();
		}
	}
	function doLogin() {
		$("#loginForm").submit();
	}
</script>
</body>
</html>
